<template>
  <div id="app" class="layui-row" :style="{backgroundImage: 'url('+bgUrl+')'}">
	  <div class="app_content layui-col-lg8 layui-col-md10 layui-col-sm10 layui-col-xs11">
		  <!-- 顶部导航栏组件 -->
		  <title-nav :titleStyle="{fontSize:'16px'}" @clickItem="clickItemFn($event)" :title="webList"></title-nav>
		  <!-- 搜索组件 -->
		  <my-search @keyUpEmit="keyUpFn($event)" v-if="searchApis.length > 0" :opactions="searchApis"></my-search>
		  <!-- 内如主体区域 -->
		  <div class="btm_content layui-row layui-col-space10">
			  <div class="layui-col-lg8 layui-col-md7 layui-col-sm12 layui-col-xs12">
				  <div class="left_content">
					  <!-- web列表展示区域 -->
					  <div class="top layui-row" >
						  <block v-if="showList.length>0">
						  <a @click="clickLinkFn(index)" target="_blank" v-for="(item,index) in showList" :key="index"
						  :href="item.url"
						  class="link_item layui-col-lg3 layui-col-md3 layui-col-sm3 layui-col-xs4">
							  <div class="icon" :style="{background:webList[curIndex].color}">
								  <img class="icon_img" v-if="item.iconUrl" :src="item.iconUrl" alt="">
								  <span v-if="!item.iconUrl" class="text">{{item.title.substr(0,2)}}</span>
							  </div>
							  <div class="title txt_ellip">{{item.title}}</div>
						  </a>
						  </block>
					  </div>
					  <!-- 下部分速查表区域 -->
					  <div class="bottom">
						  <qk-tools v-once :title="qkTools"></qk-tools>
					  </div>
				  </div>
			  </div>
			  <!-- 右侧快捷工具区域 -->
			  <div class="layui-col-lg4 layui-col-md5 layui-col-sm12 layui-col-xs12">
				  <div class="right_content">
					  <translate :translateApi="translateApi" title="百度翻译"></translate>
					  <add-web @setCollection="setCollectionFn($event)" :tagType="webList"></add-web>
				  </div>
			  </div>
		  </div>
		  
	  </div>
  </div>
</template>

<script>
// import home from './page/home.vue'
import { Toast } from "vant"
import Title from './components/title.vue'
import { setHotList, getHotList,setCollection,getCollection } from "~js/tools.js"
import mySearch from './components/mySearch.vue'
import addWeb from './components/addWeb.vue'
import translate from './components/translate.vue'
import qktools from './components/qktools.vue'

//获取本地存储的hotList,如果本地存储没有，则取js数据文件中数据项带weight权重的项目

let apiHost= "http://101.200.227.84"

export default {
  name: 'App',
  components: { 
	  'title-nav':Title,
	  'my-search':mySearch,
	  'add-web':addWeb,
	  "translate":translate,
	  "qk-tools":qktools,
	  [Toast.name]:Toast
  },
  data(){
	  return {
		    searchType: 0,
			searchVal:"",
			curIndex:0,
			showList:[],
			webList:[],
			searchApis:[],
			bgUrl:'',
			defBgUrl:[],
			translateApi:{},
			qkTools:[],
			timer:null
	  }
  },
  created(){
	  this.getWebListFn().then(()=>{
		  this.clickItemFn(0)
	  })
	  this.getPageDataFn().then((res)=>{
		 return this.setPageBgFn()
	  })
	  .catch(()=>{
		  let length=this.defBgUrl.length
		  this.bgUrl=this.defBgUrl[parseInt(Math.random()*length)]
	  })
	  this.getToolDataFn()
  },
  methods:{
	  getWebListFn(){
		  return this.axios(apiHost+'/msd-menu-classes').then((res)=>{
			  if(res.status == "200"){
				  this.webList.splice(0,this.webList.length,...res.data)
			  }
		  })
	  },
	  getPageDataFn(){
		 return this.axios(apiHost+'/msd-web').then((res)=>{
			  if(res.status == "200"){
				  this.bgUrl=res.data.bgUrl
				  this.defBgUrl.splice(0,this.defBgUrl.length,...res.data.defBgUrl)
				  this.searchApis.splice(0,this.searchApis.length,...res.data.search)
				  this.translateApi=Object.assign({},this.translateApi,res.data.translate)
			  }
			  return res
		  })
	  },
	  getToolDataFn(){
		  this.axios(apiHost+'/msd-tools').then((res)=>{
			  if(res.status == "200"){
				  res.data.forEach((item)=>{
					  item.th=item.th.split(',')
				  })
				  this.qkTools.splice(0,this.qkTools.length,...res.data)
			  }
		  })
	  },
	  setPageBgFn(){
		  let img=new Image
		      img.src=this.bgUrl
			  return new Promise((reslove,reject)=>{
				   img.onload=()=>{
					   reslove()
				   }
				   //图片加载错误
				   img.onerror=()=>{
					   reject()
				   }
				   //图片加载超时3s
				   setTimeout(()=>{
					    reject()
				   },3000)
			  })
	  },
	  setCollectionFn(e){
		  console.log(e);
		  this.axios.post(apiHost+'/msd-class-items', {
		      "title": e.title,
		      "weight": 1,
		      "url": e.url,
		      "keyword": e.Keyword,
		      "class": this.webList[e.type].id,
		      "icon": e.icon
		  }).then((res) => {
		     if(res.status == "200"){
				 Toast('添加成功！');
		     	 this.webList[e.type].items.push({
					 "classId": res.data.class.id,
					 "iconUrl": res.data.icon,
					 "id": res.data.id,
					 "keyword": res.data.keyword,
					 "title": res.data.title,
					 "url": res.data.url,
					 "weight": res.data.weight
				 })
				 if( this.curIndex == e.type ) this.clickItemFn(e.type)
		     }
		  })
	  },
	  clickLinkFn(index){
		  let item=this.webList[this.curIndex].items[index]
		  this.axios.put(apiHost+'/msd-class-items/'+item.id, {
		      "weight": item.weight-0+1,
		  }).then((res) => {
		     if(res.status == "200"){
			    this.webList[this.curIndex].items[index].weight+=1
				this.clickItemFn(this.curIndex)
		     }
		  })
	  },
	  clickItemFn(e){
		  var length=this.showList.length
		  this.curIndex=e
		  this.webList[e].items.sort((a,b)=>{
			  return b.weight - a.weight
		  })
		  console.log(this.webList[e].items);
		  this.showList.splice(0,this.showList.length,...this.webList[e].items)
	  },
	  keyUpFn(keyword){
		  clearTimeout(this.timer)
		  this.timer=setTimeout(()=>{
			  if(keyword) {
				 this.axios(apiHost+'/msd-class-items?keyword_contains='+keyword).then((res)=>{
					  if(res.status == "200"){
						  this.showList.splice(0,this.showList.length,...res.data)
					  }
				 })
			  }else{
				  this.showList.splice(0,this.showList.length,...this.webList[this.curIndex].items)
			  }
		  },200)
	  }
  }
}
</script>

<style lang="less">
::-webkit-scrollbar{
	width: 0px;
}
body{
	height: 100%;
	#app{
		width: 100%;
		height: 100%;
		overflow: auto;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		background-color:rgb(155, 89, 182);
	}
	.app_content{
		margin: auto;
		position: relative;
		padding: 30px 0;
		float: none;
	}
	.btm_content{
		padding: 15px 0;
		.left_content{
			height: auto;
			.top{
				height: 464px;
				padding: 20px 0;
				margin-bottom: 15px;
				overflow: auto;
				background: rgba(255,255,255,0.8);
				.link_item{
					height: 130px;
					display: block;
					margin: 10px 0;
				}
				.icon{
					width: 100px;
					height: 100px;
					border-radius: 100px;
					margin: auto;
					color: #fff;
					line-height: 95px;
					text-align: center;
					font-size: 30px;
					overflow: hidden;
					.icon_img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					.text{
						vertical-align: middle;
					}
				}
				.title{
					margin: auto;
					width: 80%;
					font-size: 16px;
					text-align: center;
					line-height: 30px;
					color: #333;
				}
			}
			.bottom{
				height: 504px;
				overflow: auto;
				background: rgba(255,255,255,0.8);
			}
		}
		.right_content{
			height: 1026px;
			overflow: auto;
		}
	}
}
</style>
